<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="d">
			<input  type="text"  v-model="n1"/>
			<input  type="text"  v-model="n2"/>
			<input  type="button" value="加"  v-on:click="f(1)"/>
			<input  type="button" value="减"  v-on:click="f(2)"/>
			<input  type="button" value="乘"  @click="f(3)"/>
			<input  type="button" value="除"  @click="f(4)"/>
			<h3>{{result}}</h3>
		</div>
	</body>
	<script src="vue.min.js"></script>
	<script>
		var v=new Vue({
			el: "#d",
			data:{
				result:"",
				n1:"",
				n2:""
			},
			methods:{
				f(x){
					if(isNaN(v.n1)||isNaN(v.n2)){
						v.result="请输入数字";
						return;
					}
					switch(x){
						case 1:
							v.result=v.n1*1+v.n2*1;
							break;
						case 2:
							v.result=v.n1*1-v.n2*1;
							break;
						case 3:
							v.result=v.n1*1*v.n2*1;
							break;
						case 4:
							v.result=v.n1*1/v.n2*1;
						break;
					}
				}
			}
		});
	</script>
</html>
